import {useState , useEffect, useTransition,useRef, createContext, useContext} from 'react'
import ReactDom from 'react-dom/client'


console.log(import.meta.hot);


function Child() {
  useEffect(()=>{
    console.log("child mount");
    return ()=>{
      console.log("child unMount",document.querySelector("span"))
    }

  },[])
  return (
    <div>
      Child
      <ChildChild/>
    </div>
  )
}
function ChildChild() {
  useEffect(()=>{
    console.log("ChildChild mount");
    console.log(document.querySelector("span"))
  },[])
  return (
    <h1>ChildChild</h1>
  )
}

function Son() {
  useEffect(()=>{
    console.log("Son mount");
  },[])
  return (
    <div>
      Son
    </div>
  )
}

const ctxA = createContext("default a")
const ctxB = createContext("default b")

function App() {

    return (
        <ctxA.Provider value={"A0"}>
            <ctxB.Provider value={"B0"}>
                <ctxA.Provider value={"A1"}>
                    <Cpn />
                </ctxA.Provider>
            </ctxB.Provider>
            <Cpn />
        </ctxA.Provider>
    )
}
function Cpn() {
    const a = useContext(ctxA)
    const b = useContext(ctxB)

    return <div>
        A:{a},B:{b}
    </div>

}

const root = ReactDom.createRoot(document.getElementById('root')!)

root.render(
    <App />
)

window.root = root